import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from "umi";
import { Button, Modal } from "antd";
import IconMap from "@/components/IconMap";
import Tree from "./components/Tree.jsx";
import Dialog from '@/components/Dialog/Dialog.js';
import FormComponent from "./components/FormComponent"
import "./css/index.less"

export default function index() {
    const dispatch = useDispatch();
    const { departmentList, isShowModal, departmentDetail } = useSelector(state => state.department);
    const [title, setTitle] = useState("创建部门")
    const [type, setType] = useState("update")
    useEffect(() => {
        _initDepartmentList();
    }, []);
    // 获取departmentList
    const _initDepartmentList = () => {
        dispatch({
            type: "department/getDepartmentList"
        });
    }

    // 获取部门详情做的事情
    const getDepartmentDetail = (item) => {
        dispatch({
            type: "department/getDepartmentDetail",
            payload: item._id
        });
        setTitle(item.label);
        setType("update");

    }

    //打开添加部门
    const addDepartment = () => {
        setShowModal(true);
        setTitle("创建部门");
        setType("add");
        dispatch({
            type: "department/setIsCollaspable",
            payload: false
        })
    }

    // 是否展示其Modal
    const setShowModal = (status) => {
        dispatch({
            type: "department/setIsShowModal",
            payload: status
        })
        type === 'update' && (
            dispatch({
                type: "department/setDepartmentDetail",
                payload: []
            })
        )

    }

    // 点击删除按钮删除部门操作
    const isDeleteDepartment = () => {
        // Modal.confirm
        Modal.confirm({
            title: "温馨提示",
            content: (<>{IconMap.warn}<div>是否删除该部门?</div></>),
            onOk: () => {
                dispatch({
                    type: "department/deleteDepartment",
                    payload: departmentDetail._id
                });
                dispatch({
                    type: "department/setIsShowModal",
                    payload: false
                })
            }
        })

    }

    // titleNode展示
    const modalTitleComponent = (
        <div className='department-modal-title'>
            <span className='title'>{title}</span>
            {type === "update" && <span className='icon' onClick={isDeleteDepartment}>{IconMap.del}</span>}
        </div>
    )

    return (
        <div className='department-container'>
            {/* 创建按钮 */}
            <Button
                className='departBtn'
                size="small"
                shape="round"
                onClick={addDepartment}
                icon={IconMap.add}>创建</Button>
            {/* 树形结构 */}
            <Tree
                className="Tree-container"
                departmentList={departmentList}
                getDepartmentDetail={getDepartmentDetail}></Tree>

            {/* 弹出框 
            */}
            <Dialog
                dialogStutus={isShowModal}
                className="department-detail-modal"
                setDialogStatus={setShowModal}
                width={800} title={modalTitleComponent}
                render={() => <FormComponent modalType={type} setShowModal={setShowModal}></FormComponent>}></Dialog>
        </div>
    )
}
